<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="18">
                <div>
                    <div class="panel">
                        <p class="item_title">需求描述</p>
                        <div class="padding_16 minh_300 rich_text">
                            <p v-html="infoData.p_content"></p>
                        </div>
                        <p class="item_title">附件</p>
                        <div class="padding_16 minh_50">
                            <div v-for="(item,index) in infoData.p_enclosure_name" :key="index">
                                <span style="display: inline-block;line-height: 30px;color: #2093ff;cursor: pointer;" @click="downloadFile(item.f_id,item.f_old_name,item.f_file_type)">{{item.f_old_name}}.{{item.f_file_type}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="panel mt_large">
                        <p class="item_title">技能要求</p>
                        <div class="padding_16">
                            <el-tag class="zb_tags" color="#fff" v-for="(item,index) in jnArr" :key="index">{{item}}</el-tag>
                        </div>
                    </div>
                    <div class="panel mt_large">
                        <p class="item_title">岗位要求</p>
                        <div class="padding_16">
                            <el-tag class="zb_tags" color="#fff" v-for="(item,index) in workArr" :key="index">{{item}}</el-tag>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="panel">
                    <div class="bidding_main-user white_bg">
                        <router-link :to="{path:'/homepage', query:{id: infoData.u_id}}" class="displayB paddingTB20">
                            <img v-if="u_head_portrait" :src="u_head_portrait" alt="" width="90" height="90" class="displayB centerauto borderRadius bidding_user_pic">
                            <img v-else src="../../../assets/images/userPic.png" alt="" width="90" height="90" class="displayB centerauto borderRadius bidding_user_pic">
                        </router-link>
                        <p class="bidding_user_name text-center">{{infoData.u_nickname}}</p>
                        <p class="bidding_user_maininfo text-center">{{infoData.upName}} | {{(infoData.u_type == 1) ? '个人': '企业'}}</p>
                        <div class="bidding_user_icons text-center" style="margin: 5px 0px 8px;height: initial;line-height: 26px;">
                            <el-button type="danger" v-if="infoData.type == 1" @click="getPhone">获取雇主电话</el-button>
                            <p v-else style="font-weight: bold;">{{infoData.u_phone}}</p>
                        </div>
                        <div class="bidding_user__main clearfix" style="position: relative;">
                            <div class="bidding_main__item">
                                <h4>{{infoData.all_num}}</h4>
                                <p>发布总数</p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>

        <!-- 积分获取雇主电话 -->
        <el-dialog :visible.sync="getPhoneDialog" width="430px" center :close-on-click-modal="false">
            <div class="get_phone_content">
                <img src="../../../assets/images/exchange_phone.png" alt="" width="245" class="displayB centerauto" style="margin-top: -25px;">
                <h4 class="get_phone_explain text-center">支付 {{integral.s_consume_integral}} 积分，兑换雇主电话</h4>
                <div class="get_phone_info flexbox spacebetween">
                    <p>我的接包积分</p>
                    <p>{{integral.u_integral}}</p>
                </div>
                <div class="get_phone_info flexbox spacebetween">
                    <p>雇主电话</p>
                    <p>{{gzPhone}}</p>
                </div>
                <el-button type="primary" @click="dhPhone" style="width:100%;margin-top: 20px;">{{(gzPhone != '***********')?'关闭':'立即兑换'}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>

    import '../../../assets/css/projects.css'
    import axios from 'axios';
    export default {
        data(){
            return{
                stepData: ['发布需求','筛选合适的接包方','签订电子合同、进入实施','验收完成'],
                infoData: {},
                workArr: [],
                jnArr: [],
                getPhoneDialog: false,  //获取电话   弹框
                integral: {},  //积分
                gzPhone: '***********',  //雇主电话
                u_head_portrait: '',
            }
        },
        methods: {
            init(){

                var _this = this;
                //项目详情
                this.$httpGet('/api/index/Project/projectDetail',{'p_id': this.$route.query.pid,'p_uid': window.localStorage.uid}).then(response => {

                    if(response.code == 200){

                        _this.infoData = response.msg;
                        _this.infoData.p_content = _this.escapeStringHTML(response.msg.p_content);
                        if(response.msg.p_job_demand_name){
                            _this.workArr = response.msg.p_job_demand_name.split(',');
                        }else{
                            _this.workArr = [];
                        }
                        if(response.msg.p_skills_name){
                            _this.jnArr = response.msg.p_skills_name.split(',');
                        }else{
                            _this.jnArr = [];
                        }

                        _this.u_head_portrait = response.msg.u_head_portrait;
                        
                    }else{
                        this.$message({
                            message: response.msg,
                            type: 'warning'
                        });
                    }

                });
            },
            //下载附件
            downloadFile(fid,f_old_name,f_file_type){
                var _this = this;

                axios({
                    method: 'get',
                    url: '/api/index/Project/download',
                    params: {
                        'f_id': fid,
                    },
                    responseType: 'arraybuffer',

                })
                .then(function (response) {

                    _this.download(response.data,f_old_name,f_file_type);

                })
                .catch(function (error) {
                    alert(error.response.data.msg);
                });
            },
            // 下载文件
            download (data,f_old_name,f_file_type) {
                if (!data) {
                    return
                }
                let url = window.URL.createObjectURL(new Blob([data]));
                let link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', f_old_name +'.'+f_file_type);

                document.body.appendChild(link);
                link.click();
            },
            //获取手机号
            getPhone(){
                var _this = this;

                // 获取用户积分、需消耗积分
                _this.$httpGet('/api/index/Project/getintegralForUid',{
                    'u_id': window.localStorage.uid,
                }).then(response => {
                    
                    if(response.code == 200){

                        _this.integral = response.msg;
                        _this.getPhoneDialog = true;
                    }

                });
            },
            //积分兑换手机号
            dhPhone(){

                var _this = this;

                if(_this.gzPhone == '***********'){
                    _this.$httpGet('/api/index/Project/lookProjectContact',{
                        'p_uid': window.localStorage.uid,
                        'p_id': _this.$route.query.pid,
                    }).then(response => {
                        
                        if(response.code == 200){

                            _this.gzPhone = response.msg.p_contacts_phone;
                            _this.integral.u_integral = response.msg.u_integral;

                            this.$message({
                                message: '兑换成功',
                                type: 'success'
                            });

                        }else{
                            this.$message({
                                message: response.msg,
                                type: 'warning'
                            });
                        }

                    });
                }else{
                    _this.getPhoneDialog = false;
                }
                
            },
            //解析编辑器内容
            escapeStringHTML(str) {
                str = str.replace(/&amp;/g,'&');
                str = str.replace(/&lt;/g,'<');
                str = str.replace(/&gt;/g,'>');
                str = str.replace(/&quot;/g,'"');
                return str;
            },
        },
        mounted(){
            this.init();
        },
    }
</script>